{% if en %}
    <div role="tabpanel" class="tab-pane config-section" id="sso">
        <form method="POST" autocomplete="off" class="w-100">
            <div class="form-group">
                <label for="server-ip">
                    Server Address<br>
                    <small class="form-text text-muted">
                        Auth Server Address
                    </small>
                    <small class="form-text text-muted">
                        eg. http://scr1w.dlut.edu.cn/cas/login
                    </small>
                </label>
                <input class="form-control" id='sso-server-address' name='sso_server_address' type='text'
                       {% if sso_server_address is defined and sso_server_address != None %}value="{{ sso_server_address }}"{% endif %}>
            </div>

            <div class="form-group">
                <label for="sso-auth">
                    Allow sso login
                </label>
                <div>
                    <select class="form-control custom-select" id="sso-auth" name="sso_auth">
                        <option value=0 {% if sso_auth == 0 %}selected{% endif %}>
                            OFF
                        </option>
                        <option value=1 {% if sso_auth == 1 %}selected{% endif %}>
                            ON
                        </option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label for="sso-enabled">
                    Enable SSO
                </label>
                <div>
                    <select class="form-control custom-select" id="sso-enabled" name="sso_enabled">
                        <option value="0" {% if sso_enabled == 0 %}selected{% endif %}>
                            OFF
                        </option>
                        <option value="1" {% if sso_enabled == 1 %}selected{% endif %}>
                            ON
                        </option>
                    </select>
                </div>
            </div>

            <div class="form-group" id="register-uid-group" style="display: none;">
                <label for="register-uid">
                    Student number required on register
                </label>
                <div>
                    <select class="form-control custom-select" id="register-uid" name="register_uid">
                        <option value="0" {% if register_uid == 0 %}selected{% endif %}>
                            OFF
                        </option>
                        <option value="1" {% if register_uid == 1 %}selected{% endif %}>
                            ON
                        </option>
                    </select>
                </div>
            </div>

            <script>
                // 获取sso-enabled选择框
                var ssoEnabledSelect = document.getElementById("sso-enabled");

                // 获取register-uid选项组
                var registerUidGroup = document.getElementById("register-uid-group");

                // 监听sso-enabled选择框的改变事件
                ssoEnabledSelect.addEventListener("change", function () {
                    if (ssoEnabledSelect.value === "0") {
                        // 如果用户选择ON，则显示register-uid选项组
                        registerUidGroup.style.display = "block";
                    } else {
                        // 如果用户选择OFF，则隐藏register-uid选项组
                        registerUidGroup.style.display = "none";
                    }
                });

                // 初始化检查sso-enabled选择框的初始值
                if (ssoEnabledSelect.value === "0") {
                    registerUidGroup.style.display = "block";
                }
            </script>


            <button type="submit" class="btn btn-md btn-primary float-right">Update</button>
        </form>
    </div>
{% else %}
    <div role="tabpanel" class="tab-pane config-section" id="sso">
        <form method="POST" autocomplete="off" class="w-100">
            <div class="form-group">
                <label for="server-ip">
                    服务器地址<br>
                    <small class="form-text text-muted">
                        认证服务器的地址
                    </small>
                    <small class="form-text text-muted">
                        eg. http://scr1w.dlut.edu.cn/cas/login
                    </small>
                </label>
                <input class="form-control" id='sso-server-address' name='sso_server_address' type='text'
                       {% if sso_server_address is defined and sso_server_address != None %}value="{{ sso_server_address }}"{% endif %}>
            </div>

            <div class="form-group">
                <label for="sso-auth">
                    登陆页面sso认证开关
                </label>
                <div>
                    <select class="form-control custom-select" id="sso-auth" name="sso_auth">
                        <option value=0 {% if sso_auth == 0 %}selected{% endif %}>
                            关
                        </option>
                        <option value=1 {% if sso_auth == 1 %}selected{% endif %}>
                            开
                        </option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label for="sso-enabled">
                    注册是否启用SSO统一认证
                </label>
                <div>
                    <select class="form-control custom-select" id="sso-enabled" name="sso_enabled">
                        <option value="0" {% if sso_enabled == 0 %}selected{% endif %}>
                            关
                        </option>
                        <option value="1" {% if sso_enabled == 1 %}selected{% endif %}>
                            开
                        </option>
                    </select>
                </div>
            </div>

            <div class="form-group" id="register-uid-group" style="display: none;">
                <label for="register-uid">
                    注册时是否允许学号为空
                </label>
                <div>
                    <select class="form-control custom-select" id="register-uid" name="register_uid">
                        <option value="0" {% if register_uid == 0 %}selected{% endif %}>
                            关
                        </option>
                        <option value="1" {% if register_uid == 1 %}selected{% endif %}>
                            开
                        </option>
                    </select>
                </div>
            </div>

            <script>
                // 获取sso-enabled选择框
                var ssoEnabledSelect = document.getElementById("sso-enabled");

                // 获取register-uid选项组
                var registerUidGroup = document.getElementById("register-uid-group");

                // 监听sso-enabled选择框的改变事件
                ssoEnabledSelect.addEventListener("change", function () {
                    if (ssoEnabledSelect.value === "0") {
                        // 如果用户选择ON，则显示register-uid选项组
                        registerUidGroup.style.display = "block";
                    } else {
                        // 如果用户选择OFF，则隐藏register-uid选项组
                        registerUidGroup.style.display = "none";
                    }
                });

                // 初始化检查sso-enabled选择框的初始值
                if (ssoEnabledSelect.value === "0") {
                    registerUidGroup.style.display = "block";
                }
            </script>

            <button type="submit" class="btn btn-md btn-primary float-right">更新</button>
        </form>
    </div>
{% endif %}
